<template>
  <view class="component-container" @click="enter(value.orderId)">
    <view class="body">
      <image :src="value.shopLogo" class="shop-logo" />
      <view class="info">
        <span class="shop-name">{{ value.shopName }} </span>
        <span class="receiving-method">{{ receivingMethodLabelOf(value.receivingMethod) }}</span>
        <span class="code">#{{ value.code }}</span>
      </view>
    </view>
    <view class="operation" v-show="!isCurr">
      <span><uni-icons custom-prefix="iconfont" type="icon-jinrushiyan" :size="20"></uni-icons></span>
    </view>
  </view>
</template>

<script setup lang="ts">
import { receivingMethodLabelOf } from '@/enum/ReceivingMethod'
import type { UserMapOrder } from '@/types/response/order'
import { computed } from 'vue'
interface Props {
  value: UserMapOrder
  currentOrderId?: number
}
const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits<{
  (e: 'enter', orderId: number): void
}>()
const isCurr = computed(() => props.currentOrderId === props.value.orderId)

function enter(orderId: number) {
  if (!isCurr.value) emit('enter', orderId)
}
</script>

<style scoped lang="scss">
.component-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 30rpx;
  width: 100%;
  border-radius: 20rpx;
  background-color: #fff;
  box-sizing: border-box;

  .body {
    display: flex;

    .shop-logo {
      $logo-size: 120rpx;

      margin-right: 20rpx;
      width: $logo-size;
      height: $logo-size;
      border-radius: 20rpx;
    }

    .info {
      $line-height: 70rpx;

      display: flex;
      align-items: center;
      height: $line-height;
      line-height: $line-height;
      font-weight: bold;

      .shop-name {
        font-size: $line-height * 0.45;
      }

      .receiving-method {
        $receiving-method-line-height: $line-height * 0.55;

        display: inline-block;
        margin: 0 20rpx;
        padding: 0rpx 15rpx;
        height: $receiving-method-line-height;
        font-size: $receiving-method-line-height * 0.6;
        border-radius: 10rpx;
        background-color: #ffd350;
        line-height: $receiving-method-line-height;
      }

      .code {
        font-size: 30rpx;
        color: #7f7f7f;
      }
    }
  }

  .operation {
    align-items: center;
    font-size: 25rpx;
  }
}
</style>
